<template>
    <view class="globe_back">
        <view class="box">
            <u-picker :show="show" :columns="columns" keyName="title" @confirm="confirm" @cancel="cancel"></u-picker>
            <view class="flex justify_content_between back_fff model" @click="show = true">
                <view class="carbox1 flex">
                    <view class="carmodel">服务类型</view>
                    <input style="font-size: 28rpx" disabled placeholder="请选择服务类型" v-model="serviceMode.title" />
                </view>
                <view>
                    <image class="icon_r" src="https://jiuyuan.smomotbo.com/static/imgs/query-info/next-icon.png"
                        mode="widthFix"></image>
                </view>
            </view>
            <!-- 描述照片 -->
            <view class="imgbox">
                <text class="manageLabel mt-20 mr-10">描述照片</text>
                <textarea v-model="formData.remark" class="flex" name="" id="" cols="30" rows="10"
                    placeholder="在这里输入您的描述"></textarea>
                <view>
                    <!-- <view class="xcimg" v-if="formData.images.length > 0" v-for="(item, i) in formData.images">
                        <image class="storeImg" :src="$lz.cdn(item, 3)" mode="center"
                            style="width: 140rpx; height: 140rpx; display: inline-block"></image>
                        <view class="imm_delete" @click="deletephotos(i)">
                            <image class="icon_ljt" :src="url + 'icon_sc.png'"></image>
                        </view>
                    </view>
                    <view class="img_add" style="display: inline-block" v-if="formData.images.length < maxImagesNum"
                        @click="instoreImages">
                        <image :src="url + 'updata-img.png'" mode="widthFix" style="width: 100%; height: 100%"></image>
                    </view> -->
					
					<u-upload
						:fileList="fileList6"
						@afterRead="afterRead"
						@delete="deletePic"
						name="6"
						multiple
						:maxCount="6"
						width="70"
						height="70"
						>
						<view class="img_add" style="display: inline-block" v-if="formData.images.length < maxImagesNum" >
						    <image :src="url + 'updata-img.png'" mode="widthFix" style="width: 100%; height: 100%"></image>
						</view>
					</u-upload>
                </view>
            </view>
            <view class="model back_fff">
                
				<view class="flex justify_content_between" v-if="formData.type == 1">
				    <view class="flex carbox">
				        <view class="carmodel">请选择商家</view>
				        <view class="flex justify_content_between line_F7FAFF from-title-box align_items_center"
				            style="width: 80%" @click="xzsh()">
				            <input class="f_28 cl_00091A pb_16" disabled placeholder-class="cl_CCCED1"
				                v-model="trade_name" type="text" value="" placeholder="请点击选择商家" />
				            <image class="img_32" src="https://jiuyuan.smomotbo.com/static/imgs/me-report/posi-icon.png"
				                mode="widthFix"></image>
				        </view>
				    </view>
				</view>
				<!-- <view class="back" style="margin-top: 24rpx;"> -->
				<view class="" v-if="list">
						<view class="flex" >
						    <view>
						        <image class="img_add" style="" :src="list.product_image" mode="widthFix"></image>
						    </view>
						    <view class="rightBox">
						        <view class="title">{{ list.product_name }}</view>
								<view class="flex" style="">
								    <view class="option">规格：{{ list.guige }}</view>
								</view>
						        
						        <view class="flex" style="">
						            <view class="money" style="padding-right: 100rpx;">￥{{ list.money }}</view>
						        </view>
						    </view>
						</view>
					<!-- </view> -->
					<view class="flex justify_content_between align_items_center" style="padding-top: 10rpx;font-size: 28rpx;" >
						<view class="a_c">店铺地址：{{list.address}}</view>
						<image class="img_32" src="../../static/imgs/right.png" mode=""></image>
					</view>
				</view>
				<!-- 服务位置 -->
				<view class="flex justify_content_between">
				    <view class="flex carbox">
				        <view class="carmodel">服务位置</view>
				        <view class="flex justify_content_between line_F7FAFF from-title-box align_items_center"
				            style="width: 80%" @click="chooseCurrentLocation">
				            <input class="f_28 cl_00091A pb_16" disabled placeholder-class="cl_CCCED1"
				                v-model="user_location" type="text" value="" placeholder="请选择服务位置" />
				            <image class="img_32" src="https://jiuyuan.smomotbo.com/static/imgs/me-report/posi-icon.png"
				                mode="widthFix"></image>
				        </view>
				    </view>
				</view>
                <!-- 预约时间 -->
                <u-datetime-picker :show="Timeshow" v-model="value1" mode="datetime"
                    @confirm="TimeConfirm"></u-datetime-picker>
                <view class="flex namebox carbox" @click="Timeshow = true">
                    <text class="nametitle">预约时间</text>
                    <view class="inpu line_F7FAFF">
                        <input class="name" v-model="formData.time" disabled type="text" placeholder="请选择预约时间" />
                    </view>
                </view>
                <!-- 姓名 -->
                <view class="flex namebox carbox">
                    <text class="nametitle">姓名</text>
                    <view class="inpu line_F7FAFF">
                        <input v-model="formData.name" class="name" type="text" placeholder="请填写您的姓名" />
                    </view>
                </view>
                <!-- 联系电话 -->
                <view class="flex namebox carbox">
                    <text class="nametitle">联系电话</text>
                    <view class="inpu line_F7FAFF">
                        <input v-model="formData.mobile" class="name" type="text" placeholder="请填写您的联系电话" />
                    </view>
                </view>
                <!-- 租用电池 -->
                <!-- <view v-if="formData.type == 1"> -->
                    <!-- 使用次数 -->
       <!--             <view class="flex namebox carbox">
                        <text class="nametitle">使用次数</text>
                        <view class="flex inpu line_F7FAFF">
                            <input v-model="formData.budget_num" style="width: 90%" class="name" type="text"
                                placeholder="请填写使用次数" />
                            次
                        </view>
                    </view> -->
                    <!-- 优惠券 -->
                    <view class="flex justify_content_between back_fff">
                        <view class="flex carbox">
                            <view class="carmodel">优惠券</view>
							
                            <view class="flex justify_content_between line_F7FAFF from-title-box align_items_center"
                                style="width: 80%" @click="yhq()" >
                                <input class="f_28 cl_00091A pb_16" disabled placeholder-class="cl_CCCED1" type="text"
                                    value="" v-model="coupon_title" placeholder="请选择优惠券" />
                                <image class="img_32" :src="url + 'next-icon.png'" mode="widthFix"></image>
                            </view>
							<!-- <view class="flex justify_content_between line_F7FAFF from-title-box align_items_center"
							    style="width: 80%"  v-else>
							    <input class="f_28 cl_00091A pb_16" disabled placeholder-class="cl_CCCED1" type="text"
							        value="" v-model="Coupon" placeholder="暂无优惠券" />
							    <image class="img_32" :src="url + 'next-icon.png'" mode="widthFix"></image>
							</view> -->
                        </view>
                    </view>
                <!-- </view> -->
                <!-- 检修故障 -->
                <!-- 预算报价 -->
              <!--  <view class="flex namebox carbox" v-if="formData.type == 2">
                    <text class="nametitle">预算报价</text>
                    <view class="flex inpu line_F7FAFF">
                        <input v-model="formData.budget_money" style="width: 90%" class="name" type="text"
                            :placeholder="placeholders" />
                        元
                    </view>
                </view> -->
            </view>
            <view class="back_fff Urgent">
                <!-- 是否加急 -->
                <view class="f_28 pt_24 pb_24" style="width: 100%">
                    <!-- <u-radio-group :value="formData.is_hurry" @click="changeHurry" placement="column" shape="circle" iconPlacement="right">
            <u-radio label="是否加急" shape="circle" :name="1"> </u-radio>
          </u-radio-group> -->
                    <u-checkbox-group placement="column" shape="circle" iconPlacement="right" @change="changeHurry">
                        <u-checkbox label="是否加急" :name="1"></u-checkbox>
                    </u-checkbox-group>
                </view>
            </view>
           <!-- <view class="tip" v-if="formData.type == 1">每使用{{ duration }}分钟为一次，{{ unitPrice }}元/次</view>
            <view class="tip" v-if="formData.type == 2">请确认信息准确性，预算报价不得低于￥{{budget}}</view> -->
        </view>
        <view style="height: 100rpx"></view>
        <!-- 优惠券弹窗 -->
        <u-popup :show="couponShow" :round="10" mode="bottom" @close="close" @open="open">
            <view >
				
				<u-radio-group v-model="radiovalue13" placement="column" @change="groupChanges" iconPlacement="right">
				<scroll-view class="scroll-view_H" scroll-y="true" @scroll="scroll" style="height: 500rpx;">
						<u-radio :customStyle="{
							margin: '8px 16px',
							background: '#FFEFE5',
							padding: '16px'
						}" v-for="(item, index) in coupon" :key="index" :label="index" :name="index"
							@change="radioChange">
							<view class="flex couponBox">
								<view class="discount">
									<view style="font-size: 52rpx">{{ item.coupon_price }}</view>
									<view>{{ item.coupon_text }}</view>
								</view>
								<view class="title">
									<view>{{ item.coupon_title }}</view>
									<view class="time">有效期至{{ item.useageend_time }}</view>
								</view>
							</view>
						</u-radio>
						</scroll-view>
						
						<view class="couponBtn" @click="submit">确认</view>
					</u-radio-group>
				
            </view>
        </u-popup>
        <!-- 底部 -->
        <view class="button flex justify_content_between">
            <view class="TotalPrice">
                <view class="f_24">
                    合计费用：
                    <text style="color: #ff6401; font-size: 32rpx; font-weight: bold">{{zong_money}}</text>
                </view>
				
				<text style="font-size: 24rpx;" v-if="formData.type == 1"><text style="color: #999CA3;" >电池费用</text>￥{{dc_money}}</text>
				<text style="font-size: 24rpx;"><text style="color: #999CA3;">服务费用</text>￥{{fw_money}}</text>
				<text style="font-size: 24rpx;"><text style="color: #999CA3;">优惠金额</text>￥{{coupon_price}}</text>
            </view>
            <view class="buy" @click="tj">立即下单</view>
			<!-- <image class="img_750_40 .mt_40" :src="url + 'technical-support-icon.png'" mode=""></image> -->
        </view>
    </view>
</template>

<script>
import { getConfByCode, upload, getDictByCode, unifyOrder, getDirectionByDriving } from '@/api';

export default {
    data() {
        return {
            url: '',
            unitPrice: '',
            duration: '',
            maxImagesNum: 6,
            show: false,
            Timeshow: false,
            couponShow: false,
            value1: Number(new Date()),
            checkboxValue1: [],
            Coupon: '',
            // 优惠券
            coupon: [],
            checkboxList1: [
                {
                    name: '是否加急',
                    disabled: false
                }
            ],
            serviceMode: {},
            // formData: {
            //     location: { address: '', fullAddress: '', latitude: '', longitude: '', name: '' },
            //     images: [],
            //     type: 0,
            //     remark: '',
            //     time: '',
            //     name: '',
            //     mobile: '',
            //     budget_money: '',
            //     budget_num: '',
            //     is_hurry: 0
            // },
            "formData": {
                "applytime": "2023-7-3 12:0:19",
                "budget_money": "",
                "budget_num": "1",
                "images": [
                    "319324b2e10a79ae8419cf04aa7d53aa"
                ],
                "is_hurry": 0,
                "location": {
                    "address": "贵州省贵阳市南明区箭道街25号(贵州龙旁)",
                    "fullAddress": "贵州省贵阳市南明区箭道街25号(贵州龙旁)(曦夕茶书院(贵阳店))",
                    "latitude": 26.568529,
                    "longitude": 106.714062,
                    "name": "曦夕茶书院(贵阳店)"
                },
                "mobile": "",
                "name": "",
                "remark": "",
                "time": "",
                "type": ""
            },
            columns: [],
			fileList6:[],
			images:[],
			trailer_address:'',
			trailer_longitude:'',
			trailer_latitude:'',
			user_location:'',
			user_longitude:'',
			user_latitude:'',
			title:'',
			budget:'',
			placeholders:'',
			budget_moneyss:'',
			list:'',
			dc_money:0,
			fw_money:0,
			zong_money:0,
			trade_name:'',
			radiovalue13:-1,
			coupon_price:0,
			coupon_title:'',
			coupon_id:0,
			coupon:[],
			// coupon:'',
        };
    },
    computed: {
        tail_free() {
            this.budget_moneyss=this.$lz.money(this.formData.budget_num).multiply(this.unitPrice).value
            return this.$lz.money(this.formData.budget_num).multiply(this.unitPrice).value
        }
    },
    onShow() {
        this.url = this.baseUrl + this.imgPath;
		// console.log(,'itemitemitemitemitemitemitemitem'); //输出数组的每一个元素
		// console.log(this.ajax_url3,'jxiasxjsaio')
        this.getServiceMode();
        // this.getUnitPrice()
        // this.getDuration()
    },
	onLoad() {
	 
	  if(this.$.get_data('hdc')){
		   this.list=this.$.get_data('hdc')
		   this.dc_money=this.list.money
		   // this.fw_money=this.list.deposit
		   this.zong_money=this.list.zong_money
		   this.trade_name=this.list.trade_name
	  }
	  if(this.$.get_data('zctype')){
		  const item = this.$.get_data('zctype');
		  this.serviceMode = item;
		  this.formData.type = item.id;
		  this.title=item.title;
		  this.fw_money=item.money
		  // this.images=item.on_site_photos
		  // this.fileList6=item.on_site_photos
		  this.formData.remark=item.on_site_content
		  var that= this
		  item.on_site_photos.forEach(function (item, index) {
		       
			   if(!item.includes('http')){
				   item=that.$.ajax_url33()+item
			   }
		       that.images.push(item)
			   that.fileList6.push({url:item})
		  });
		  // this.images=item.on_site_photos
		  
		  console.log(this.images,'jcisaoxjasioxjasxoiaksxosapxkaopsxkasopx')
	  }
	  console.log(this.list)
	  // console.log(this.list);
	},
    methods: {
		tj() {
			if(!this.title){
				this.$.ti_shi('请选择服务类型');
				return;
			}
			if(!this.formData.remark){
				this.$.ti_shi('请填写描述');
				return;
			}
			if(!this.images.join(',')){
				this.$.ti_shi('请上传描述图片');
				return;
			}
			if(!this.user_location){
				this.$.ti_shi('请选择服务位置');
				return;
			}
			if(!this.formData.time){
				this.$.ti_shi('请选择预约时间');
				return;
			}
			if(!this.formData.name){
				this.$.ti_shi('请填写姓名');
				return;
			}
			if(!this.formData.mobile){
				this.$.ti_shi('请填写联系电话');
				return;
			}
			if(this.formData.type==2){
				if(!this.formData.mobile){
					this.$.ti_shi('请填写联系电话');
					return;
				}
			}
			
			// if(this.formData.type==1){
			
			// 	if(this.formData.budget_num<1){
			// 		let msg='使用次数不得低于1次';
			// 		this.$.ti_shi(msg);
			// 		return;
			// 	}
			// }
			
			
			console.log(this.formData)
			let data={
				servicetype:this.title,
				on_site_photos:this.images.join(','),
				on_site_content:this.formData.remark,	
				service_j:this.formData.is_hurry,
				user_location:this.user_location,	
				user_longitude:this.user_longitude,	
				user_latitude:this.user_latitude,	
				consignee:this.formData.name,	
				mobile:this.formData.mobile,
				service_time:this.formData.time,
				service_num:this.formData.budget_num,
				servicetype_id:this.formData.type,
				// coupon_price:0,
				order_price:this.dc_money,
				// usercoupon_id:0,
				service_fees:this.fw_money,
				specifications:this.$.get_data('hdc'),
				coupon_price:this.coupon_price,
				coupon_id:this.coupon_id,
			}
			// if(this.formData.type==1){
			// 	data.service_num=this.formData.budget_num
			// 	data.actual_price=this.budget_moneyss
			// }
			// if(this.formData.type==2){
			// 	data.budget_quotation=this.formData.budget_money
				data.actual_price=this.zong_money
			// }
			// console.log(data);return;
		   this.$.ajax(1,"POST","index/service_ordering",data,(res)=>{
				if(res.code==200){
				     var that =this
				      uni.requestPayment({
				      	provider: "weixin",
				      	timeStamp: res.data.timeStamp,
				      	nonceStr: res.data.nonceStr,
				      	package: res.data.package,
				      	signType: res.data.signType,
				      	paySign: res.data.paySign,
				      	success: function (ress) {
				      		setTimeout(() => {
				      			uni.navigateBack({
				      				delta:1
				      			})
				      		}, 1000);
				      	},
				      	fail: function (err) {
				      		console.log(err)
				      		that.$.ti_shi(err)
				      					
				      	}
				      });
				}else{
				   this.$.ti_shi(res.msg);
				}
		  })
		},
		xzsh(){
			
			
			  const item = this.$.get_data('zctype');
			  item.on_site_photos=this.images
			  item.on_site_content=this.formData.remark
			  this.$.set_data('zctype',item);
			  // console.log(item);return;
				  uni.navigateTo({
					  url: '/pages/index/OfflineStores?type=1',
					  events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: (data)=> {
			
											
											
								// this.contract_title=data.contract_name;
						},
					  },
					  success: (res) =>{
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
					  }
					})
		},

        // getUnitPrice() {
        //     getConfByCode('service_fee').then((res) => {
        //         const { value } = res.data;
        //         this.unitPrice = value;
        //     });
        // },
        // getDuration() {
        //     getConfByCode('service_duration').then((res) => {
        //         const { value } = res.data;
        //         this.duration = value;
        //     });
        // },
        getServiceMode() {
            // getDictByCode('service_mode').then((res) => {
            //     this.columns = [res.data];
            // });
			this.$.ajax(1,"POST","index/servicetype",{},(res)=>{
			  if(res.code==200){
				  console.log(res)
				 // this.unitPrice = res.unitPrice;
				 this.columns = [res.data];
				 this.unitPrice = res.unitPrice;
				 this.duration = res.duration;
				 this.budget = res.budget;
				 this.placeholders='请填写预算报价，不能低于￥'+res.budget
				 this.coupon=res.coupon
				 
			  }else{
			     this.$.ti_shi(res.msg);
			  }
			})
        },
        changeHurry(e) {
            this.formData.is_hurry = e.length == 1 ? 1 : 0;
        },
        // submit() {
        //     this.couponShow = false;
        // },
		yhq(){
			this.$.ajax(1,"POST","index/money_coupon_list",{
				money:this.dc_money,
			},(res)=>{
			  if(res.code==200){
				    	console.log(res.data)
						if(res.data.length>0){
							this.coupon=res.data;
							// this.radiovalue13=res.data[0].id
							// this.xz_coupon=res.data[0];
							this.show=true
							this.couponShow=true
							
						}else{
							this.$.ti_shi('暂无可用优惠券');
						}
						
						
			  }else{
			     this.$.ti_shi(res.msg);
			  }
			})
			
		},
        groupChange(n) {
            console.log('groupChange', n);
            this.Coupon = n;
        },
		groupChanges(n){
			this.radiovalue13=n
		},
		submit(){
				
				this.coupon_price=this.coupon[this.radiovalue13].coupon_price
				this.coupon_title=this.coupon[this.radiovalue13].coupon_title
				this.coupon_id=this.coupon[this.radiovalue13].id
				// console.log(this.coupon_price,this.coupon_title,this.coupon_id)
				this.show=false
				this.couponShow=false
				this.zong_money=Number(this.zong_money)-Number(this.coupon_price)
			
			
		},
        radioChange(n) {
            console.log('radioChange', n);
        },
        // 删除现场照片
        deletephotos(i) {
            this.formData.images.splice(i, 1);
        },
        // 现场照片
        async instoreImages() {
            const images = this.formData.images;
            const count = this.maxImagesNum - images.length; //图片长度
            this.$lz.chooseImage({ count: count }, async (res) => {
                const result = await res.map(async ({ path }) => {
                    const {
                        data: {
                            data: { hash }
                        }
                    } = await upload(path);
                    return hash;
                });
                const results = await Promise.all(result);
                this.formData.images = this.$lz.union(images, results);
            });
        },
        chooseCurrentLocation() {
            this.$.choose_address((res) => {
            	this.user_location=res.address
            	this.user_longitude=res.lng
            	this.user_latitude=res.lat
            });
        },
        buy() {
            unifyOrder(3, { meta: this.formData }).then(({ data: { id } }) => {
                this.$u.route('/pages/index/payment', { id })
            });
        },
        confirm(e) {
			console.log(e)
            const item = e.value[0];
            this.budget_money = '';
            this.budget_num = '';
            this.serviceMode = item;
            this.formData.type = item.id;
			this.title=item.title;
			this.fw_money=item.money
			
			// this.formData
			// console.log(item)
			this.$.set_data('zctype',item)
			
			this.$.set_data('hdc','')
			this.list=this.$.get_data('hdc')
			this.dc_money=0
			this.zong_money=Number(this.fw_money)+(this.dc_money)
			this.trade_name=''
            this.show = false;
        },
        cancel() {
            this.show = false;
        },
        TimeConfirm(e) {
            console.log(this.getTime(e.value));
            this.formData.time = this.getTime(e.value);
            this.Timeshow = false;
        },
        // 获取当前时间
        getTime(e) {
            const date = new Date(e);
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const hours = date.getHours();
            const minutes = date.getMinutes();
            const second = date.getSeconds();
            // console.log(year, month, day, hours, minutes);
            this.formData.applytime = `${year}-${month}-${day} ${hours}:${minutes}:${second}`;
            return `${year}-${month}-${day} ${hours}:${minutes}`;
        },
		// 删除图片
		deletePic(event) {
			this.images.splice(event.index, 1)
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.$.ajax_url+'common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						this.images.push(JSON.parse(res.data).data.url)
						 // console.log(this.fileList6)
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
    }
};
</script>

<style scoped lang="scss">
.xcimg {
    width: 140rpx;
    height: 140rpx;
    display: inline-block;
    position: relative;
    margin: 10rpx 9rpx 0;

    .imm_delete {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        line-height: 140rpx;

        .icon_ljt {
            width: 40rpx;
            height: 40rpx;
        }
    }
}

.box {
    padding: 32rpx;

    .icon_r {
        width: 32rpx;
        height: 32rpx;
        vertical-align: middle;
    }

    .model {
        padding: 32rpx 24rpx;
        border-radius: 24rpx;
        margin-top: 24rpx;
    }

    .carbox {
        width: 100%;
        padding: 24rpx 0;
    }

    .carbox1 {
        width: 100%;
    }

    .inpu {
        width: 70%;
        padding-bottom: 16rpx;
    }

    .carmodel,
    .title {
        width: 30%;
        color: #333a47;
        font-size: 28rpx;
        display: inline-block;
    }

    .car {
        width: 60%;
        font-size: 28rpx;
        display: inline-block;
    }

    .img_add {
        width: 140rpx;
        height: 140rpx;
    }

    .imgbox {
        background: white;
        border-radius: 24rpx;
        padding: 32rpx 24rpx;
        color: #333a47;
        font-size: 28rpx;
        margin-top: 24rpx;
    }

    .manageLabel {
        width: 30%;
    }

    .nametitle {
        width: 27%;
        font-size: 28rpx;
    }

    .name {
        font-size: 28rpx;
    }

    .tip {
        color: #3377ff;
        font-size: 24rpx;
        margin-top: 24rpx;
    }
}

.button {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16rpx 32rpx;
    background: #ffffff;
    z-index:9999;
    .buy {
        width: 176rpx;
        height: 76rpx;
        line-height: 76rpx;
        text-align: center;
        color: white;
        border-radius: 8rpx;
        background-image: linear-gradient(to right, #ff924d, #ff6401);
    }
}

.Urgchebox {
    width: 100% !important;
}

.Urgent {
    padding: 0 24rpx;
    border-radius: 24rpx;
    margin-top: 24rpx;
}

.couponBox {
    .discount {
        color: #ff6401;
        font-size: 24rpx;
        text-align: center;
    }

    .title {
        color: #00091a;
        font-size: 32rpx;
        margin-left: 66rpx;
    }

    .time {
        color: #999ca3;
        font-size: 28rpx;
        display: block;
        margin-top: 16rpx;
    }
}

.couponBtn {
    margin: 24rpx auto;
    width: 686rpx;
    height: 100rpx;
    border-radius: 24rpx;
    background: #3377ff;
    text-align: center;
    line-height: 100rpx;
    color: white;
    font-size: 32rpx;
    font-weight: bold;
}
	.back {
		width: 638rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		margin-left: 32rpx;
	}
	.a {
		display: flex;
		/* justify-content: space-between; */
	}
	.a_b {
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.a_but {
		padding: 8rpx 16rpx;
		background-color: #F7FAFF;
	}
	
	.a_c {
		width: 598rpx;
		display: block;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.a_xian {
		width: 478rpx;
		padding-bottom: 18rpx;
		border-bottom: 2rpx solid #F7FAFF;
		/* margin-top: 10rpx; */
	}
	
	.a_d {
		width: 526rpx;
		height: 336rpx;
		background: #F7FAFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 32rpx 56rpx;
	}

     .productMap {
			width: 96rpx;
			height: 96rpx;
			border-radius: 8rpx;
	  }
	  .rightBox {
	      width: 70%;
	  }
	  .title {
	      width: 100%;
	      font-size: 32rpx;
	      color: #00091a;
	      font-weight: bold;
	      display: block;
	      white-space: nowrap;
	      overflow: hidden;
	      text-overflow: ellipsis;
	      margin-left: 16rpx;
	  }
	  .option {
	      color: #999ca3;
	      font-size: 24rpx;
	      background: #f7faff;
	      padding: 16rpx;
	      border-radius: 16rpx;
	      display: inline-block;
	      margin-left: 16rpx;
	      margin-top: 16rpx;
	  }
	  .money {
	      color: #ff6401;
	      font-size: 32rpx;
	      margin-left: 16rpx;
	      margin-top: 16rpx;
	  
	  }
</style>
